|
Basic HTML Written by, er... D!ck!
HTML, or HyperText Markup Language, is a form of scripting that's used to create Internet Web Pages. You do not need any special software to create HTML, just a browser to be able to view it properly. This is a guide to help you get started, it will cover the basics of HTML and a few of the more advanced features, and hopefully will help you create your own pages quickly and easily.
HTML files are read into the browser program, and built up rather like structured drawing. Granted there you don't get the vast range of commands that are available in a Structured Drawing package, but then you wouldn't normally type those in yourself. HTML documents are ASCII files that are written in a certain way, a file is processed based on what it contains, and this is done as a list of TAGS. There are two types of TAG: those which enclose and area; and those that do not. The start and end of a HTML document are defined using the HTML and End-HTML Tags, the end tag is simply the start tag with the "/" character in front of it, and all tags are surrounded with angular ("<" and ">") brackets, or the "greater than" and "less than" symbols.
Your first tag, then, is <HTML> and it's corresponding end tag of </HTML>, which will define your HTML document. Create a new text file and write them in as follows.
<HTML> Congratulations, you have just written a HTML document! now that was not so hard was it? OK, so it doesn't actually DO anything, but it is a HTML document, nonetheless. Your HTML document will usually consist of two parts, a header and a body text, not suprisingly these use the <HEAD> and <BODY> tags, and because something has to go between them they have corresponding end tags. A word here on enclosing tags. It is always a good idea to ensure you have closed your tag correctly before you actually put anything in it, so that you don't forget. In the above example we have closed the HTML tag already, and because both the HEAD and the BODY are parts of the document, they need to go inside the HTML tag, but they are not part of each other, so we end up with:
<HTML> Note that it is perfectly valid to put all of the tags on the same line of the document, it just isn't very readable! For this reason we take the programmers convention and indent related lines to the same degree, thus <HEAD> and </HEAD> are indented to the same amount because they are related. This has absolutely no effect on the output of the file, you could write the above as...
...and it would do exactly the same thing, however it is generally only advisable to put tags on the same line when there is very little between them, just to keep things clear. You do not need a HEAD area to create a working document, but it is the part of the file that tells the browser and the user about it, so it's not a bad idea to invest 30 seconds knocking one up! The main thing you'll stick in here is the Title of the document, this is a string of text that will be displayed at the top of your browser and stored in your bookmark area whenever you create one. As it is a string, it has to be closed in an area and - you guessed it - it has to have an end tag...
<HTML>
<HEAD>
<BODY>
</HTML> ...you'll notice that I have started to space things out a bit too, so that you can see where the <HEAD> and <BODY> areas start and end. The addition of lines for this purpose will also have no effect on your document because seperate lines are not dispayed in this way, to get a line of text one the screen, we have to put it in the main <BODY> of our document.
Anything you put in the BODY area - unless it is simply a remark for yourself - will be displayed on the page when you view it in your web browser. The <BODY> tag itself also takes a few parameters if you want to use them. In all cases of enclosing tags, it is always the opening tag that takes params, never the closing tag.
This is possibly the most popular param in the BODY tag, it simply sets the background colour of the page to a 24-bit value that we are all familiar with, so:
will produce a document with a white background. This is all very nice unless your text colour is white too, in which case you can change it using:
Which will set the colour of text (although not links) throughout the document. Some browsers, especially on the PC, allow you to substitute words like BLACK, WHITE, GREEN etc for the RGB values in these two commands, but as there will always be a browser somewhere that doesn't permit this, it's a good idea to stick to numeric values.
Allows you to specify an image file that will be used for the back- ground of the displayed document, if it is too small to cover the entire page them it will be tesselated like wallpaper, so it's a good idea to pick a textture that will wrap properly, and to refrain from using logos that will tile when people use larger resolutions. Replace {filename} with your file, eg:
You can combine parameters in any order, it makes no difference whatsoever, and it means that:
will do the same as:
To tell the truth, there is little point in setting a BGCOLOR and a BACKGROUND, because the background image will overwrite the colour anyway. On some browsers, however, BGCOLOR also determines which colour is used for transparent backgrounds, so it might be worth keeping this in mind.
So you've typed in all the text that you want to display in your new web page, launched your browser and loaded it in, only to find that there's one massive block of text on the screen. Because of the differences between machines, it is not enough to press your Return key to get the text onto another line, a document that reads
<BODY> Will simply display This is line one This is line two on the screen. To seperate the two we have to use the first single tag, the line break, or <BR>. This is the same as forcing a return, but it can be used anywhere in a document, even to seperate graphical images, so the above BODY area should be re-written:
<BODY> Obviously the line break does not enclose an area, and as such does not have a corresponding end tag, there is no such thing as </BR> ! Similarly, you can define areas of text as Paragraphs by inserting a Paragraph break, or <P>. Because these are meant to represent blocks of text, it's generally more readable to put them between the blocks, though obviously it makes no difference, it's simply more readable. Replacing <BR> with <P> in the above example produces much the same but with one small difference: There is now a blank line between the two lines of text, because the second line is defined as a new paragraph. Additionally, I would put the <P> on it's own line between the two. I have seen the </P> tag in use as well, to define the end of a para- graph, but personally I have never used it.
OK, so you've got your big blocks of text on the screen and you've read through them and decided that there are some words that you want to underline, some that you want bold, and some that you want to appear in stonking great text instead of that same size all the time. To change the style of an area you can use:
<B> ... </B> to emBOLDen an area, These have end tags, that means they apply to the area between them. Simply choose the area you want to change and insert the relevent tags. Note that none of the above three tags are affected by the <BR> or <P> methods of seperating, if your text goes over one of these it won't be switched off half way through, handy sometimes, worth remembering on other occasions. You can also make an area a different size of text. By default the font size used (not the same as the size defined in the actual font files by any means) is 3, but it can range from 1 up to 7, allowing you to use different sizes wherever you want them. Again, this tag controls an area, and it's quite simply: <FONT> ... </FONT> <FONT> takes several parameters as well, like <BODY>, these are: SIZE={0-7} In Amiga browsers these are defined in the setting somewhere unless proper true-type fonts are used, on the PC they are all automatic. FACE="{fontname}[,{fontname}][,{fontname}]" The FACE parameter of the <FONT> tag lets you make three attempts at finding a font on the host machine, if the first is not found then it looks for the second, if the second is not found then it looks for the third. COLOR="#rrggbb" The text colour can be changed from the default by using this parameter to set a temporary rendering colour, again it is in the standard RGB format, and again, some browsers recognise keywords like BLACK, WHITE, YELLOW etc.
End of lesson 01! ================= If you'd like to influence the way this course runs you can E-Mail any questions to me at Dick@emarkt.com and I will try to gear the course more towards the things that people are asking. Failing that, you can write to the normal submissions address and ask for your queries to be forwarded on to me by E-Mail. D!ck |